// FileUpload.js
import React, { useState } from "react";


export default function FileUpload({ children,jumpAction }) {
  const [selectedFiles, setSelectedFiles] = useState(null);

  const handleFileChange = (event) => {
    // 使用 FileList 对象获取所有选中的文件
    const files = Array.from(event.target.files);

    // 将新选中的文件添加到现有文件中（如果你想保留之前选中的文件）
    // 如果不想保留之前的文件，可以直接使用 files
    setSelectedFiles(files);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    // 检查是否有选中的文件
    if (selectedFiles.length > 0) {
      // 创建一个 FormData 对象用于存储文件数据
      const formData = new FormData();

      // 遍历选中的文件并添加到 FormData 对象中
      selectedFiles.forEach((file, index) => {
        formData.append(`files[]`, file);
      });

      // 在这里，你可以使用 fetch API 或其他方法将 formData 发送到服务器
      // 例如：
      await fetch("http://localhost:3001/delete-pages", {
        method: "POST",

        body: formData,
      })
        .then(async (response) => {
          var data = await response.json();
          var fname=data["data"]["files"].map(it=>it["filename"]).reduce((i1,i2)=> i1+","+i2)
          jumpAction(fname);
        })
        .catch((error) => console.error("Error:", error));

      // 为了演示，我们仅将文件信息打印到控制台
      console.log("Selected files:", selectedFiles);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="uploader">
      <div className="input file">
        <label htmlFor="tf">Choose, paste or drag files here</label>

        <input type="file" onChange={handleFileChange} id="tf" multiple />
        {/* <button type="submit">Upload</button> */}
      </div>
      <p>
        Maximum combined file size: 100MB, up to 500 files
        <br />
        Supported types: PDF, DOC, DOCX, ODT, PPT, PPTX
        <br />
        (other files will be converted to PDF automatically)
      </p>
      <p>All files are automatically deleted 1 hour after upload.</p>
      <div className="submit">
        <input
          id="ub"
          className="action-button"
          type="submit"
          value="Upload files!"
        />
      </div>
      <div className="c"></div>

      <div id="tool-description">{children}</div>
    </form>
  );
}
